<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of the Grid plugin.
        The jQWidgets Grid plugin offers rich support for interacting with data, including
        paging, grouping and sorting. </title>
    <link rel="stylesheet" href="@Url.Content("~/jqwidgets/styles/jqx.base.css")" type="text/css" />
    <script type="text/javascript" src="@Url.Content("~/scripts/jquery-1.7.2.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxcore.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxdata.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxbuttons.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxscrollbar.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxmenu.js")")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxcheckbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxlistbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxdropdownlist.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxgrid.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxgrid.sort.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxgrid.pager.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxgrid.selection.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxpanel.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/jqwidgets/jqxchart.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/scripts/gettheme.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            var theme = getTheme();
            var url = "api/series/1";
            var parentsLength = $("#jqxWidget").parents().length;
            if (parentsLength > 3) {
                url = 'api/series/1';
            }

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'X', type: 'float' },
                    { name: 'XLabel' },
                    { name: 'Y', type: 'float' },
                    { name: 'YLabel' },
                    { name: 'Notes' }
                ],
                root: "",
                record: "",
                id: 'Id',
                url: url
            };
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                columns: [
                  { text: 'X', datafield: 'X', width: 40, cellsalign: 'left' },
                  { text: 'XLabel', datafield: 'XLabel', width: 100 },
                  { text: 'Y', datafield: 'Y', cellsalign: 'left', width: 40 },
                  { text: 'YLabel', datafield: 'YLabel', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Notes', datafield: 'Notes' },
                ]
            });


            //panel events *****************************
            $('#events').jqxPanel({ width: 300, height: 80, theme: theme });

            $("#jqxgrid").bind("sort", function (event) {
                $("#events").jqxPanel('clearcontent');

                var sortinformation = event.args.sortinformation;
                var sortdirection = sortinformation.sortdirection.ascending ? "ascending" : "descending";
                if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
                    sortdirection = "null";
                }

                var eventData = "Triggered 'sort' event <div>Column:" + sortinformation.sortcolumn + ", Direction: " + sortdirection + "</div>";
                $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
            });

            $('#clearsortingbutton').jqxButton({ height: 25, theme: theme });
            $('#sortbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            // clear the sorting.
            $('#clearsortingbutton').click(function () {
                $("#jqxgrid").jqxGrid('removesort');
            });
            // show/hide sort background
            $('#sortbackground').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ showsortcolumnbackground: event.args.checked });
            });

            plotChart("stackedcolumn");

        });

        function plotChart(type) {
            // prepare chart data as an array ***************************************
            var sData = [];
            $.get('api/series/1', function (data) {
                for (var i = 0; i < data.length; i++) {
                    sData.push({ Month: data[i].XLabel, X: data[i].X, Y: data[i].Y, Diff: data[i].X - data[i].Y });
                }

                if (type == 'pie') {
                    // prepare jqxChart settings
                    var settings = {
                        title: "Series 1 - X Only",
                        description: "",
                        enableAnimations: true,
                        showLegend: true,
                        legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                        padding: { left: 5, top: 5, right: 5, bottom: 5 },
                        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                        source: sData,
                        categoryAxis:
                    {
                        dataField: 'Month',
                        valuesOnTicks: false
                    },
                        colorScheme: 'scheme02',
                        seriesGroups:
                    [
                        {
                            type: type,
                            showLabels: true,
                            valueAxis:
                            {
                                unitInterval: 5,
                                minValue: 0,
                                maxValue: 50,
                                description: 'Series (%)',
                                formatSettings: { prefix: '%', thousandsSeparator: ',' }
                            },
                            mouseover: myEventHandler,
                            mouseout: myEventHandler,
                            click: myEventHandler,
                            series: [
                                    { dataField: 'X', radius: 150, displayText: 'Series 1 - X', color: '#1100EE', initialAngle: 15, centerOffset: 0, formatSettings: { sufix: '%', decimalPlaces: 1} }
                                ]
                        }
                    ]
                    };
                } else {
                    // prepare jqxChart settings
                    var settings = {
                        title: "Series 1 - X & Y",
                        description: "",
                        enableAnimations: true,
                        showToolTips: true,
                        showLegend: true,
                        padding: { left: 5, top: 5, right: 5, bottom: 5 },
                        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                        source: sData,
                        categoryAxis:
                    {
                        text: 'Months of the year',
                        textRotationAngle: 0,
                        dataField: 'Month',
                        valuesOnTicks: false
                    },
                        colorScheme: 'scheme04',
                        seriesGroups:
                    [
                        {
                            type: type,
                            valueAxis:
                            {
                                unitInterval: 5,
                                minValue: 0,
                                maxValue: 50,
                                description: 'Series (%)',
                                formatSettings: { prefix: '%', thousandsSeparator: ',' }
                            },
                            mouseover: myEventHandler,
                            mouseout: myEventHandler,
                            click: myEventHandler,
                            series: [
                                    { dataField: 'X', radius: 10, displayText: 'Series 1 - X', color: '#1100EE' },
                                    { dataField: 'Y', radius: 10, displayText: 'Series 1 - Y', color: '#EE0011' }
                                ]
                        }
                    ]
                    };

                }
                // setup the chart
                $('#jqxChart').jqxChart(settings);
            });

            //**********************************
        }

        function myEventHandler(e) {
            var eventData = '<b>Last Event: </b>' + e.event + '<b>, DataField: </b>' + e.serie.dataField + '<b>, Value: </b>' + e.elementValue;
            $('#eventText').html(eventData);
        };

    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; margin-top: 10px;">
        <div id="eventslog" style="margin-top: 30px;">
            <div style="float: left; margin-right: 10px;">
                <input value="Remove Sort" id="clearsortingbutton" type="button" />
                <div style="margin-top: 10px;" id='sortbackground'>
                    Sort Background</div>
            </div>
            <div style="margin-left: 100px; float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
        <div id="jqxgrid">
        </div>
        <br />
        <div>
            Chart Types:
            <select id="charttype" onchange="javascript:plotChart($('option:selected', this).val());">
                <option value="stackedcolumn">Stacked Column</option>
                <option value="scatter">Scatter</option>
                <option value="stackedline">Stacked Line</option>
                <option value="stackedline100">Stacked Line 100</option>
                <option value="column">Column</option>
                <option value="stackedcolumn100">Stacked Column 100</option>
                <option value="stackedarea">Stacked Area</option>
                <option value="stackedarea100">Stacked Area 100</option>
                <option value="line">Line</option>
                <option value="pie">Pie</option>
                <option value="splinearea">Spline Area</option>
            </select>
        </div>
        <div id='jqxChart' style="width: 670px; height: 400px; margin-top: 20px;">
        </div>
        <div id='eventText' style="width: 670px; height: 30px" />
    </div>
</body>
</html>
